<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>更新时的一个问题</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>人员列表</h2>
    <!--v-model双向绑定-->
    <button @click="updateM">更新马冬梅信息</button>
    <ul v-for="p in persons" :key="p.id">
        <li>{{p.name}}-{{ p.age }}- {{ p.sex }}</li>
    </ul>
</div>
<script type="text/javascript">
    const  vm = new Vue({
        el:'#root',
        data: {
            persons: [
                {id: "001", name:'周冬雨', age:20, sex:'女'},
                {id: "002", name:'马冬梅', age:19, sex:'女'},
                {id: "003", name:'周杰伦', age:21, sex:'男'},
                {id: "004", name:'温兆伦', age:22, sex: '男'},
            ],
        },
        methods:{
            updateM(){
                // this.persons[1].name = '马老师';  //奏效
                // this.persons[1].age = 50;      //奏效
                // this.persons[1].sex = '男'; //奏效
                // this.persons[1] = { id: '002', name: '马老师', age: 50, sex:'男' }; //这样修改vue是无法监测数据的
                this.persons.splice(1,1,{ id: '002', name: '马老师', age: 50, sex:'男' });
            }

        }
    });
</script>
</body>
</html>
